9/2/2021 Guide Docs | LiveCode 


Signature Widget 


The signature widget is a canvas for freehand drawing, that can be used for capturing signatures. The path data can 
then be exported. 


Creating a Signature Widget 


A signature widget can be created by dragging it out from the Tools Palette, where it appears with the following icon: 
LF 


create widget as "com. livecode.widget.signature" 


Alternatively it can be created in script using: 


Using the Signature Widget 


Once the signature has been drawn on the widget, the data can be exported using the pathData property. This is a 
numerically keyed array consisting of the individual pieces of path data that make up the drawn path. 


Each path info element contains three keys: 


e path - SVG path instructions 
e color - the color to paint the path with 
e width - the line width of the path 


The following code can be used to export the pathData array to SVG file format: 
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function svgFileData pSignature 
local tPathData 
put the pathData of pSignature into tPathData 
local tSVG 
put "<svg xmlns=" & \ 
quote & "http://www.w3.org/2000/svg" & quote & \ 
">" & return into tSVG 





repeat for each element tElement in tPathData 





Put "<pakh d=" quote & thlement|“path" |“ quete after teSvG 
put " stroke=" & quote & \ 
Ung biGuaceiacen tom Scott tlement Inve Olona] evn) ua CancuO cen \ 
Eubeisie ies NE 





put " stroke-opacity=" & quote & \ 
round(item 4 of tElement["color"] / 255) & quote after tSVG 








put " stroke-width=" & quote & tElement["width"] & quote \ 
Cubes SWE 
put "/>" & return after tSVG 
end repeat 
put "</svg>" after tSVG 
return tSVG 
end svgFileData 


The pathData can also be used to manipulate the appearance of the signature. For example, to thicken the line 
data, the following handler could be used: 


command thickenSignature pSignature, pFactor 
local tPathData 
put the pathData of pSignature into tPathData 
repeat for each key tKey in tPathData 
multiply tPathData[tKey] ["width"] by pFactor 
end repeat 
set the pathData of pSignature to tPathData 


end thickenSignature 
The results of applying this to a signature with factors of 1.5 and 0.5 can be seen below: 
le 
Similarly, colours can be applied. 
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